<template>
	<view class="login">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="mt-150">
			<u--image src="../../static/logo.png" shape="circle" width="80px" height="80px" class="logo"></u--image>
			<view class="login_form">
				<u--input placeholder="请输入账号" border="surround" v-model="loginForm.account"></u--input>
				<u--input placeholder="请输入密码" type="password" border="surround" v-model="loginForm.pwd"></u--input>
				<u--input placeholder="请输入验证码" border="surround" v-model="loginForm.code">
					<template slot="suffix">
						<u--image :src="codeInfo.code" width="80px" height="26px" @click="getCode"></u--image>
						<!-- <image :src="(codeInfo.code)" mode="scaleToFill" width="80px" height="26px" @click="getCode">
						</image> -->
					</template>
				</u--input>
				<u-button text="登录" style="margin-top: 50px;" @click="login"></u-button>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		login,
		code
	} from '@/utils/api.js'
	export default {
		data() {
			return {

				loginForm: {
					account: '',
					pwd: '',
					code: '',
					key: ''
				},
				codeInfo: {
					code: '',
					key: ''
				}
			};
		},
		methods: {
			async login() {
				login(this.loginForm).then(res => {
					console.log(res);
					uni.showToast({
						title: '登陆成功!',
						icon: 'success'
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home',
						})
					}, 2000)

				}).catch(err => {
					this.getCode()
				})
			},
			async getCode() {
				let res = await code()
				this.codeInfo = res.data
				this.codeInfo.code = this.filterBase64(res.data.code)
				this.loginForm.key = this.codeInfo.key
			},
			filterBase64(codeImages) {
				return codeImages.replace(/[\r\n]/g, "");
			}


		},
		mounted() {
			this.getCode()

		}
	}
</script>

<style lang="scss">
	.login {
		background: #46a6ff;
		width: 100vw;
		height: 100vh;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.mt-150 {
			width: 100%;
			margin-top: 150px;
			text-align: center;
			display: inline-block;

			.logo {
				align-items: center;
			}

		}

		.login_form {
			padding: 10px;
			box-sizing: border-box;

			.u-input {
				margin-top: 20px;
			}
		}
	}
</style>